<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询全部信息</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div id="box_body">

    <table class="gridtable">
        <tr>
            <th>序号</th>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>生日</th>
            <th>操作</th>
        </tr>
        <tr v-for="(user,i) in users">
            <td>{{i}}</td>
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td v-if="user.sex==1">男</td>
            <td v-if="user.sex==0">女</td>
            <td>{{user.birth | formatTimer}}</td>
            <td>
                <a><button @click="del(user.id)">删除</button></a>
                <a><button @click="editStu(user.id)">修改</button></a>
            </td>
        </tr>
        <tr style="border: none">
            <td colspan="3">
                <button style="width: 100%" @click="addStu">添加</button>
            </td>
            <td colspan="3">
                <button style="width: 100%" @click="logout">退出登陆</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el : "#box_body",
        data : {
            users:[]
        },
        filters: {
            formatTimer: function(value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? "0" + MM : MM;
                let d = date.getDate();
                d = d < 10 ? "0" + d : d;
                return y + "-" + MM + "-" + d ;
            }
        },
        methods:{
            findAll:function(){
                var _this=this
                axios({
                    method :'post',
                    url:"/stu/findAll"
                }).then(res=>{
                    if (res.data=='unPermission') {
                        location.href="/to/unPermission"
                        return
                    }
                    _this.users=res.data
                    console.log(_this.users)
                })
            },
           del:function(id){
                var _this = this
               if (window.confirm("是否确认删除")){
                  axios({
                      method : "get",
                      url : "/stu/del",
                      params:{
                          id : id
                      }
                  }).then(res=>{
                      if (res.data == "success") {
                          alert("删除成功")
                          _this.findAll()
                      }else if (res.data == "unPermission") {
                          location.href="/to/unPermission"
                          return
                      }
                  })
               }
           },
            editStu:function(id) {
              localStorage.setItem("id",id)
              location.href = "/to/toEditStu"
            },
            addStu:function (){
                location.href = "/to/toAddStu"
            },
            logout:function() {
                location.href = "/user/logout"
            }
        },
        created(){
            this.findAll()
        }
    })
</script>
</html>